<template>
  <div class="flex-1">
    <div>
      <el-row>
        <el-input
          size="mini"
          v-model="search.taskname"
          placeholder="请输入任务名称"
          style="width: 200px"
        ></el-input>
        <el-button
          size="mini"
          type="primary"
          @click="fetch()"
        >搜索</el-button>
        <el-button
          size="mini"
          type="primary"
          @click="formVisible=true"
        >新增任务</el-button>
        <el-button
          size="mini"
          type="primary"
        >删除任务</el-button>
      </el-row>
      <el-table
        :data="tasks"
        border
        style="width: 100%"
      >
        <el-table-column
          type="selection"
          width="50"
        >
        </el-table-column>
        <el-table-column
          type="index"
          width="50"
        >
        </el-table-column>
        <el-table-column
          prop="taskname"
          label="任务名称"
        >
        </el-table-column>
        <el-table-column
          prop="projectname"
          label="所属项目"
          width="220"
        >
        </el-table-column>
        <el-table-column
          prop="fzr"
          label="负责人"
          width="180"
        >
        </el-table-column>
        <el-table-column
          prop="status"
          label="任务状态"
          width="180"
        >
        </el-table-column>
        <el-table-column
          label="操作"
          width="100"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              @click.native="deleteUser(scope.row)"
            >编辑</el-button>
            <el-button
              type="text"
              @click.native="deleteUser(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        current-page="0"
        layout="prev, pager, next, ->, total"
        :total="0"
      >
      </el-pagination>
    </div>
    <el-dialog
      title="编辑项目"
      fullscreen="true"
      :visible.sync="formVisible"
      @close="cancelForm"
    >
      <el-form
        label-position="top"
        :model="form"
        :rules="rules"
        ref="form"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
      >
        <el-form-item
          label="任务名称"
          prop="taskname"
        >
          <el-input v-model="form.taskname"></el-input>
        </el-form-item>
        <el-form-item label="所属项目">
          <el-select
            v-model="form.projectid"
            placeholder="请选择"
          >
            <el-option
              v-for="item in projects"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="负责人"
          prop="fzr"
        >
          <el-input v-model="form.fzr"></el-input>
        </el-form-item>
        <el-form-item
          label="任务计划时间"
          prop="description"
        >
          <el-date-picker
            v-model="form.plantime"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item
          label="任务描述"
          prop="description"
        >
          <mavon-editor
            :subfield="false"
            defaultOpen="edit"
            placeholder="添加描述..."
            :toolbars="toolbars"
            v-model="form.description"
          ></mavon-editor>
        </el-form-item>
        <el-form-item label="相关附件">
          <el-upload
            class="upload-demo"
            action=""
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="3"
            :on-exceed="handleExceed"
            :file-list="fileList"
          >
            <el-button
              size="small"
              type="primary"
            >点击上传</el-button>
            <div
              slot="tip"
              class="el-upload__tip"
            >只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click.native="formVisible=false">取 消</el-button>
        <el-button
          type="primary"
          @click.native="saveForm"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import DataTable from '@/components/DataTable'
import { user as userRes } from '@/resources'
import MavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
export default {
  data () {
    return {
      toolbars: {
        bold: true, // 粗体
        italic: true, // 斜体
        header: true, // 标题
        underline: true, // 下划线
        strikethrough: true, // 中划线
        mark: true, // 标记
        superscript: true, // 上角标
        subscript: true, // 下角标
        quote: true, // 引用
        ol: true, // 有序列表
        ul: true, // 无序列表
        link: true, // 链接
        imagelink: true, // 图片链接
        code: true, // code
        table: true, // 表格
        subfield: true, // 是否需要分栏
        fullscreen: true, // 全屏编辑
        readmodel: false, // 沉浸式阅读
        htmlcode: false, // 展示html源码
        help: true // 帮助
      },
      projects: [
        {
          label: '项目1',
          value: '1'
        },
        {
          label: '项目2',
          value: '2'
        },
        {
          label: '项目3',
          value: '3'
        },
        {
          label: '项目4',
          value: '4'
        }
      ],
      search: {
        taskname: '',
        pagesize: 10,
        currentpage: 0,
        total: 0
      },
      form: {
        taskname: '',
        projectid: '',
        fzr: '',
        status: '',
        plantime: ['', ''],
        planfrom () {
          return this.plantime[0]
        },
        planto () {
          return this.plantime[1]
        },
        description: '## 测试'
      },
      rules: {
        taskname: [
          {
            required: true,
            message: '请输入项目名称',
            trigger: 'blur'
          }
        ],
        fzr: [
          {
            required: true,
            message: '请输入负责人',
            trigger: 'blur'
          }
        ]
      },
      formVisible: false,
      tasks: [
        {
          taskname: '测试任务1',
          projectname: '测试项目1',
          fzr: '张三',
          status: '待办中'
        },
        {
          taskname: '测试任务1',
          projectname: '测试项目1',
          fzr: '张三',
          status: '进行中'
        },
        {
          taskname: '测试任务1',
          projectname: '测试项目1',
          fzr: '张三',
          status: '已完成'
        },
        {
          taskname: '测试任务1',
          projectname: '测试项目1',
          fzr: '张三',
          status: '已验收'
        }
      ]
    }
  },
  components: {
    DataTable,
    MavonEditor: MavonEditor.mavonEditor
  },
  methods: {
    fetch (current = 1) {
      this.$refs.users
        .query(userRes, current, { search: this.search })
        .then(list => {
          this.users = list
        })
        .catch(err => {
          console.error(err)
        })
    },
    createUser () {
      this.formVisible = true
    },
    cancelForm () {
      this.form.username = ''
      this.form.password = ''
      this.formVisible = false
    },
    saveForm () {
      this.$refs.form.validate(valid => {
        if (valid) {
          userRes
            .save(null, this.form)
            .then(() => {
              this.cancelForm()
              this.$message({
                type: 'success',
                message: '新增成功'
              })
              this.fetch()
            })
            .catch(err => {
              this.$message({
                type: 'error',
                message: err.status === 422 ? '用户已存在' : '新增失败'
              })
            })
        }
      })
    },
    deleteUser (user) {
      this.$confirm(
        `This action will remove the selected user: ${
          user.username
        } forever, still going on?`,
        '提示',
        {
          type: 'warning'
        }
      )
        .then(() => {
          userRes.delete({ _id: user._id }).then(() => {
            this.$message({
              type: 'success',
              message: '删除成功'
            })
            this.fetch()
          })
        })
        .catch(() => {})
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.fetch()
    })
  }
}
</script>

<style lang="stylus" scoped>
.el-row {
  margin-left: 1px;
  margin-bottom: 1px;

  .el-button {
    margin-left: 0;
  }
}

.el-pagination {
  padding: 0 1px;
  background-color: #fff;
  border: solid #eaeef5 1px;
  border-top: none;
}
</style>
